<!--  -->
<template>
  <div class='dashboard-container'>
    <el-row class="title">
      <span>基础数据</span>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <el-card>
            <pie-chart v-if="JSON.stringify(pieOption1)!='{}'" :pieData="pieOption1" />
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <el-card>
            <pie-chart v-if="JSON.stringify(pieOption2)!='{}'" :pieData="pieOption2" />
          </el-card>
        </div>
      </el-col>
      <!-- <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <el-card>
          <pie-chart :pieData="pieOptions"/>
          </el-card>
        </div>
      </el-col> -->
    </el-row>
    <el-row class="title">
      <span>测量数据</span>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <el-row :gutter="32" class="tools">
            <el-select v-model="value" size="mini" @change="selectChange" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-radio-group v-if="value!='1'" @change="typeChange" v-model="type" size="mini">
              <el-radio-button v-for="(item,index) in typeRadios" :key="index" :label="item"></el-radio-button>
            </el-radio-group>
            <el-radio-group @change="radioChange" v-model="radio" size="mini">
              <el-radio-button v-for="(item,index) in radios" :key="index" :label="item"></el-radio-button>
            </el-radio-group>
            <el-date-picker v-model="time" type="daterange" align="right" @change="dateChange" unlink-panels value-format="yyyy-MM-dd" size="mini" style="float:right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </el-row>
          <bar-chart2 v-if="JSON.stringify(barOptions)!='{}'&&value!='1'" :height="barHeight" :width="barWidth" :barData="barOptions" />
          <bar-chart v-if="JSON.stringify(barOptions)!='{}'&&value==='1'" :height="barHeight" :width="barWidth" :barData="barOptions" />
        </div>
      </el-col>
    </el-row>
    <!-- <table class="bordered" style="width:100%;text-align:center">
      <tbody>
        <tr>

      </tr>
      </tbody>
      </table> -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import PieChart from "../components/PieChart";
import BarChart from "../components/BarChart";
import BarChart2 from "../components/BarChart2";
import {
  getRepairs,
  getSafetyCount,
  getReapriCon,
  getAbnormalPie,
  getRepairPie
} from "@/api/charts";
import axios from "axios";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { PieChart, BarChart, BarChart2 },
  data() {
    //这里存放数据
    return {
      options: [
        {
          value: "1",
          label: "一年同列"
        },
        {
          value: "2",
          label: "二年同列"
        },
        {
          value: "3",
          label: "三年同列"
        }
      ],
      type: "0",
      typeRadios: null,
      show: true,
      series: null,
      axisData: null,
      radios: ["一月", "三月", "半年", "一年", "所有"],
      barHeight: "440px",
      barWidth: "100%",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value: "2",
      value1: "",
      radio: "",
      time: "",
      pieOptions: {},
      pieOption1: {},
      pieOption2: {},
      pieOption3: {},
      barOptions: {},
      BarData: {}
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    fetchData() {
      let repairCon = { data: this.value, date: [], type: this.type };
      axios
        .all([getReapriCon(repairCon), getAbnormalPie(), getRepairPie()])
        .then(
          axios.spread((con, abnormal, repair) => {
            this.BarData = con;
            this.typeRadios = [con.data1.name, con.data2.name];
            this.barOptions = {
              toolbox: {
                feature: {
                  dataView: {
                    optionToContent: function(opt) {
                      console.log("opt", opt);
                      console.log("data", opt.dataset[0].source);
                      const data = opt.dataset[0].source;
                      const axisData = opt.xAxis[0].data;
                      const series = opt.series;
                      console.log("axiosData", axisData);
                      console.log("series", series);

                      let table =
                        '<table class="bordered" style="width:100%;text-align:center"><tbody><tr>';
                      for (let i = 0; i < data[0].length; i++) {
                        table += "<td>" + data[0][i] + "</td>";
                      }
                      table += "</tr>";
                      for (let i = 0; i < data.length; i++) {
                        table +=
                          "<tr>" +
                          "<td>" +
                          data[i][0] +
                          "</td>" +
                          "<td>" +
                          data[i][1] +
                          "</td>" +
                          "<td>" +
                          data[i][2] +
                          "</td>" +
                          "</tr>";
                      }
                      table += "</tbody></table>";
                      return table;
                    }
                  }
                }
              },
              title: {
                subtext: con.title
              },
              dataset: {
                source: con.data2.value
              },
              series: [
                {
                  name: con.data2.value[0][1]
                },
                {
                  name: con.data2.value[0][2]
                }
              ]
            };

            this.pieOption1 = {
              title: {
                text: "安全巡查统计"
              },
              series: [
                {
                  name: "安全巡查统计",
                  data: abnormal
                }
              ]
            };
            this.pieOption2 = {
              title: {
                text: "维修情况"
              },
              series: [
                {
                  name: "维修情况",
                  data: repair
                }
              ]
            };
          })
        );
    },
    //下拉框事件
    selectChange(value) {
      console.log("下拉项值 ", value);
      let data = { data: value, date: [], type: this.type };
      getReapriCon(data).then(con => {
        //一年同列用barChart 其它用barChart2
        this.BarData = con;
        if (value === "1") {
          console.log("title", con.title);
          this.barOptions = {
            title: {
              text: con.title,
              subtext: con.title
            },
            toolbox: {
              feature: {
                dataView: {
                  optionToContent: function(opt) {
                    console.log("opt", opt);
                    const axisData = opt.xAxis[0].data;
                    const series = opt.series;
                    console.log("axiosData", axisData);
                    console.log("series", series);
                    const table =
                      '<table class="bordered" style="width:100%;text-align:center"><tbody><tr>' +
                      "<td>时间</td>" +
                      "<td>" +
                      series[0].name +
                      "</td>" +
                      "<td>" +
                      series[1].name +
                      "</td>" +
                      "<td>" +
                      series[2].name +
                      "</td>" +
                      "</tr>";
                    for (var i = 0, l = axisData.length; i < l; i++) {
                      table +=
                        "<tr>" +
                        "<td>" +
                        axisData[i] +
                        "</td>" +
                        "<td>" +
                        series[0].data[i] +
                        "</td>" +
                        "<td>" +
                        series[1].data[i] +
                        "</td>" +
                        "<td>" +
                        series[2].data[i] +
                        "</td>" +
                        "</tr>";
                    }
                    table += "</tbody></table>";
                    return table;
                  }
                }
              }
            },
            legend: {
              data: [con.data1.name, con.data2.name]
            },
            xAxis: [{ data: con.date }],
            series: [
              {
                name: con.data1.name,
                data: con.data1.value
              },
              {
                name: con.data2.name,
                data: con.data2.value
              }
            ]
          };
        } else {
          this.barOptions = {
            toolbox: {
              feature: {
                dataView: {
                  optionToContent: function(opt) {
                    console.log("opt", opt);
                    console.log("data", opt.dataset[0].source);
                    let data = opt.dataset[0].source;
                    let axisData = opt.xAxis[0].data;
                    let series = opt.series;
                    console.log("axiosData", axisData);
                    console.log("series", series);

                    let table =
                      '<table class="bordered" style="width:100%;text-align:center"><tbody><tr>';
                    for (let i = 0; i < data[0].length; i++) {
                      table += "<td>" + data[0][i] + "</td>";
                    }
                    table += "</tr>";
                    for (let i = 0; i < data.length; i++) {
                      table +=
                        "<tr>" +
                        "<td>" +
                        data[i][0] +
                        "</td>" +
                        "<td>" +
                        data[i][1] +
                        "</td>" +
                        "<td>" +
                        data[i][2] +
                        "</td>" +
                        "</tr>";
                    }
                    table += "</tbody></table>";
                    return table;
                  }
                }
              }
            },
            dataset: {
              source: con.data2.value
            },
            series: [
              {
                name: con.data2.value[0][1]
              },
              {
                name: con.data2.value[0][2]
              }
            ]
          };
        }
      });
      console.log("selectData", this.barOptions);
    },
    dateChange(value) {
      console.log("时间项值 ", value);
      let data = { data: "", date: value };
      getReapriCon(data).then(res => {
        console.log(res);
      });
    },
    radioChange(value) {
      console.log("单选框值 ", value);
      let start;
      console.log("bardata", this.BarData);
      // this.barOptions.dataZoom = [{ start: 0 }];
      switch (value) {
        case "一月":
          this.barOptions.dataZoom = [{ start: 0 }];
          break;
        case "三月":
          start = 100 - 100 / this.BarData.date.length / 3;
          this.barOptions.dataZoom = [{ start: start }];
          break;
        case "半年":
          start = 100 - 100 / this.BarData.date.length / 6;
          this.barOptions.dataZoom = [{ start: start }];
          break;
        case "一年":
          start = 100 - 100 / this.BarData.date.length / 12;
          this.barOptions.dataZoom = [{ start: start }];
          break;
        case "所有":
          this.barOptions.dataZoom = [{ start: 0 }];
          break;
        default:
          break;
      }
    },
    typeChange(value) {
      this.type = value;
    },
    initPieData() {
      this.pieOptions = {
        color: ["#d3758f", "#f3d999", "#a4d8c2", "#a4d8c2"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          left: "center",
          bottom: "10"
        },
        calculable: true,
        title: {
          text: "欠租户数",
          backgroundColor: "#849fe2",
          textStyle: {
            color: "#fff",
            fontSize: 16
          }
        },
        series: [
          {
            name: "欠租户数",
            type: "pie",
            roseType: "radius",
            radius: [15, 95],
            center: ["50%", "38%"],
            data: [
              { value: 320, name: "未出租房屋数量" },
              { value: 0, name: "房屋出租数量" }
            ],
            animationEasing: "cubicInOut",
            animationDuration: 2600
          }
        ]
      };
    },
    initOptions() {
      // this.options1
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.fetchData();
    this.initPieData();
    this.initOptions();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.dashboard-container {
  padding: 20px;
  .el-card.is-always-shadow {
    box-shadow: 1px 4px 12px 1px #9aaddc61;
  }
  // .tools {
  //   margin-left: 50px;
  //   margin-right: 50px;
  // }
  .title {
    margin-bottom: 10px;
    border-bottom: 1px solid #dce0e4;
    padding: 14px;
    span {
      font-size: 24px;
      color: #252525;
      padding-left: 10px;
      border-left: 5px solid #409eff;
    }
  }
}
</style>